<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的费用</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .fee-statistics {
            margin-bottom: 20px;
        }
        .fee-statistics .layui-row {
            margin-bottom: 10px;
        }
        .fee-statistics .layui-col-md3 {
            text-align: center;
            padding: 15px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 10px;
        }
        .fee-statistics .fee-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .fee-statistics .fee-amount {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
        .fee-statistics .fee-count {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .status-paid {
            color: #5FB878;
        }
        .status-unpaid {
            color: #FF5722;
        }
        .status-overdue {
            color: #FF0000;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 费用统计 -->
        <div class="fee-statistics">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="fee-title">总费用</div>
                    <div class="fee-amount" id="totalAmount">¥0.00</div>
                    <div class="fee-count" id="totalCount">共0笔</div>
                </div>
                <div class="layui-col-md3">
                    <div class="fee-title">已缴费用</div>
                    <div class="fee-amount status-paid" id="paidAmount">¥0.00</div>
                    <div class="fee-count" id="paidCount">已缴0笔</div>
                </div>
                <div class="layui-col-md3">
                    <div class="fee-title">未缴费用</div>
                    <div class="fee-amount status-unpaid" id="unpaidAmount">¥0.00</div>
                    <div class="fee-count" id="unpaidCount">未缴0笔</div>
                </div>
                <div class="layui-col-md3">
                    <div class="fee-title">逾期费用</div>
                    <div class="fee-amount status-overdue" id="overdueAmount">¥0.00</div>
                    <div class="fee-count" id="overdueCount">逾期0笔</div>
                </div>
            </div>
        </div>

        <!-- 搜索条件 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">费用类型</label>
                            <div class="layui-input-inline">
                                <select name="feeType">
                                    <option value="">全部</option>
                                    <option value="1">物业费</option>
                                    <option value="2">车位费</option>
                                    <option value="3">水费</option>
                                    <option value="4">电费</option>
                                    <option value="5">燃气费</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">缴费状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="1">已缴</option>
                                    <option value="2">未缴</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="startDate" id="startDate" placeholder="请选择开始日期" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="endDate" id="endDate" placeholder="请选择结束日期" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="fee-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 费用列表 -->
        <table class="layui-hide" id="feeTable" lay-filter="feeTableFilter"></table>
        
        <!-- 操作按钮模板 -->
        <script type="text/html" id="feeTableBar">
            {{#  if(d.status == 2){ }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="pay">缴费</a>
            {{#  } }}
            <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
        </script>

        <!-- 缴费弹窗 -->
        <div id="paymentDialog" style="display: none">
            <div class="layui-form layuimini-form" lay-filter="paymentForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">费用类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="feeTypeName" readonly class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="amount" readonly class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">截止日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="dueDate" readonly class="layui-input layui-disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">缴费方式</label>
                    <div class="layui-input-block">
                        <select name="paymentMethod" lay-verify="required" lay-reqtext="请选择缴费方式">
                            <option value="">请选择缴费方式</option>
                            <option value="1">微信支付</option>
                            <option value="2">支付宝</option>
                            <option value="3">银行卡</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注信息" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="confirmPaymentBtn">确认缴费</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 费用详情弹窗 -->
        <div id="feeDetailDialog" style="display: none">
            <form class="layui-form layuimini-form" lay-filter="feeDetailDialog">
                <div class="layui-form-item">
                    <label class="layui-form-label">费用ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="feeId" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">费用类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="feeTypeName" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="amount" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">截止日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="dueDate" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费状态</label>
                    <div class="layui-input-block">
                        <input type="text" name="statusName" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="paidAt" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缴费方式</label>
                    <div class="layui-input-block">
                        <input type="text" name="paymentMethodName" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="createTime" readonly class="layui-input layui-disabled" value="">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;
        
        // 全局设置ajax请求头
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                if (data && data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });

        // 初始化日期选择器
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        // 获取当前用户信息
        var userData = JSON.parse(localStorage.getItem('user'));
        var currentUserId = userData ? userData.user.userId : null;

        // 加载费用统计
        function loadFeeStatistics() {
            if (!currentUserId) {
                layer.msg('用户信息获取失败');
                return;
            }
            
            $.get('/userFee/statistics', {userId: currentUserId}, function(res) {
                if (res.code === 0 && res.data) {
                    var data = res.data;
                    $('#totalAmount').text('¥' + (data.totalAmount || 0).toFixed(2));
                    $('#paidAmount').text('¥' + (data.paidAmount || 0).toFixed(2));
                    $('#unpaidAmount').text('¥' + (data.unpaidAmount || 0).toFixed(2));
                    $('#overdueAmount').text('¥' + (data.overdueAmount || 0).toFixed(2));
                    $('#totalCount').text('共' + (data.totalCount || 0) + '笔');
                    $('#paidCount').text('已缴' + (data.paidCount || 0) + '笔');
                    $('#unpaidCount').text('未缴' + (data.unpaidCount || 0) + '笔');
                    $('#overdueCount').text('逾期' + (data.overdueCount || 0) + '笔');
                }
            });
        }

        // 费用类型映射
        var feeTypeMap = {
            1: '物业费',
            2: '车位费',
            3: '水费',
            4: '电费',
            5: '燃气费'
        };

        // 缴费状态映射
        var statusMap = {
            1: '已缴',
            2: '未缴'
        };

        // 缴费方式映射
        var paymentMethodMap = {
            1: '微信支付',
            2: '支付宝',
            3: '银行卡'
        };

        // 渲染费用表格
        table.render({
            elem: '#feeTable',
            url: '/userFee/query',
            where: {userId: currentUserId},
            toolbar: true,
            defaultToolbar: ['filter', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'feeId', width: 80, title: '费用ID', sort: true},
                {field: 'feeType', width: 100, title: '费用类型', templet: function(d){
                    return feeTypeMap[d.feeType] || d.feeType;
                }},
                {field: 'amount', width: 120, title: '金额', templet: function(d){
                    return '¥' + d.amount.toFixed(2);
                }},
                {field: 'dueDate', width: 120, title: '截止日期'},
                {field: 'status', width: 100, title: '状态', templet: function(d){
                    var statusClass = d.status == 1 ? 'status-paid' : 'status-unpaid';
                    if (d.status == 2 && new Date(d.dueDate) < new Date()) {
                        statusClass = 'status-overdue';
                    }
                    return '<span class="' + statusClass + '">' + (statusMap[d.status] || d.status) + '</span>';
                }},
                {field: 'paidAt', width: 120, title: '缴费时间'},
                {field: 'paymentMethod', width: 100, title: '缴费方式', templet: function(d){
                    return paymentMethodMap[d.paymentMethod] || '';
                }},
                {title: '操作', minWidth: 150, toolbar: '#feeTableBar', align: "center", fixed: 'right'}
            ]],
            limits: [10, 20, 50],
            limit: 10,
            page: true,
            skin: 'line',
        });

        // 监听搜索操作
        form.on('submit(fee-search-btn)', function (data) {
            data.field.userId = currentUserId;
            table.reload('feeTable', {
                page: { curr: 1 },
                where: data.field
            });
            return false;
        });

        // 行内按钮监听
        table.on('tool(feeTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'pay') {
                // 打开缴费弹窗
                form.val("paymentForm", {
                    feeTypeName: feeTypeMap[data.feeType] || data.feeType,
                    amount: '¥' + data.amount.toFixed(2),
                    dueDate: data.dueDate,
                    paymentMethod: '',
                    remark: ''
                });
                
                // 存储当前费用ID
                $('#paymentDialog').data('feeId', data.feeId);
                
                layer.open({
                    title: '缴费',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['500px', '450px'],
                    content: $("#paymentDialog")
                });
            } else if (obj.event === 'detail') {
                // 打开详情弹窗
                form.val("feeDetailDialog", {
                    feeId: data.feeId,
                    feeTypeName: feeTypeMap[data.feeType] || data.feeType,
                    amount: '¥' + data.amount.toFixed(2),
                    dueDate: data.dueDate,
                    statusName: statusMap[data.status] || data.status,
                    paidAt: data.paidAt || '未缴费',
                    paymentMethodName: paymentMethodMap[data.paymentMethod] || '未选择',
                    createTime: data.createTime
                });

                layer.open({
                    title: '费用详情',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['500px', '500px'],
                    content: $("#feeDetailDialog")
                });
            }
        });

        // 确认缴费
        form.on('submit(confirmPaymentBtn)', function (data) {
            var field = data.field;
            var feeId = $('#paymentDialog').data('feeId');
            
            var paymentData = {
                feeId: feeId,
                paymentMethod: field.paymentMethod,
                userId: currentUserId,
                remark: field.remark
            };
            
            $.ajax({
                url: '/userFee/pay',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(paymentData),
                success: function(res) {
                    if (res.code === 0) {
                        layer.msg('缴费成功');
                        layer.closeAll();
                        // 刷新表格和统计
                        table.reload('feeTable');
                        loadFeeStatistics();
                    } else {
                        layer.msg(res.msg || '缴费失败');
                    }
                },
                error: function() {
                    layer.msg('缴费失败，请稍后重试');
                }
            });
            return false;
        });

        // 页面加载时获取费用统计
        loadFeeStatistics();
    });
</script>
</body>
</html> 